<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>        <html class="ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>        <html class="ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>        <html class="ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--><head>
  <meta charset="utf-8">
  <title>Expense</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="shortcut icon" href="assets/image/favicon.ico" type="image/x-icon" />

  <!-- Styles -->
  <link rel="stylesheet" href="assets/css/style.css">

  <!-- Color Scheme -->
  <!-- <link rel="stylesheet" href="assets/css/purple.css"> --> <!-- Warna Ungu -->
  <!-- <link rel="stylesheet" href="assets/css/green.css"> --> <!-- Warna Hijau -->

  <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script language="javascript" type="text/javascript" src="javascripts/excanvas.js"></script>
  <![endif]-->

</head>

<body>
  
  <div class="container">
      
    <!-- Sidebar
    ================================================== -->
    <div id="sidebarMenu">
      <ul class="nav">
        <li class="active">
          <a href="#">Expenses</a>
          <ul class="nav">
            <li class="active">
              <a href="#">Expense Input</a>
            </li>
            <li class="">
              <a href="#">Expense Listing</a>
            </li>
            <li class="">
              <a href="#">Expense Edit</a>
            </li>
            <li class="">
              <a href="#">Data Import</a>
            </li>
            <li class="">
              <a href="#">Category Input</a>
            </li>
            <li class="">
              <a href="#">Division Input</a>
            </li>
            <li class="">
              <a href="#">Department Input</a>
            </li>
          </ul>
        </li>
      </ul>
      <div class="bottom-fix">
        <ul class="nav">
          <li class="">
            <a href="#">Accounting</a>
          </li>
          <li class="">
            <a href="#">Inventory</a>
          </li>
          <li class="">
            <a href="#">Customer</a>
          </li>
          <li class="">
            <a href="#">Comission</a>
          </li>
          <li class="">
            <a href="#">Expense</a>
          </li>
        </ul>
        <a href="#" class="btn btn-primary" id="colorToggle">
          <i class="icon-wand icon-primary"></i>
        </a>  
      </div>
    </div>
    
    <!-- Konten Utama
    ================================================== -->
    <div id="tableFilter">
      <span class="elipsis"></span>
      <form>
        <div class="form-group">
          <label>View By :</label>
          <div id="viewBy" class="select-input">
            <select>
              <option>Employee</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label>Employee :</label>
          <div id="employee" class="select-input">
            <select>
              <option>Petter</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label>Period :</label>
          <div id="period" class="select-input">
            <select>
              <option>All</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label>Period Including:</label>
          <div id="date" class="select-input">
            <select>
              <option>2</option>
            </select>
          </div>
          <div id="month" class="select-input">
            <select>
              <option>9</option>
            </select>
          </div>
          <div id="year" class="select-input">
            <select>
              <option>2012</option>
            </select>
          </div>
        </div>
        <a href="#" class="btn">
          <i class="icon-file"></i>
          <i class="caret"></i>
        </a>
        <div class="form-group">
          <label>More Filter:</label>
          <div id="more" class="select-input">
            <select>
              <option>Show All</option>
            </select>
          </div>
        </div>
        <button type="submit" class="btn">
          <i class="icon-refresh"></i>
        </button>
      </form>
    </div> <!-- table filter -->
    
    <div class="blocker hide"></div>

    <div id="tableForm">
      <form>
        <div class="form-group">
          <label>Extra Input</label>
          <input type="text"/>
        </div>
        <div class="form-group">
          <label>Extra Input</label>
          <input type="text"/>
        </div>
        <div class="form-group">
          <label>Extra Input</label>
          <input type="text"/>
        </div>
        <div class="form-group">
          <label>Date</label>
          <input type="text"/>
        </div>
        <div class="form-group">
          <label>Description</label>
          <textarea></textarea>
        </div>
        <div class="form-group">
          <label>Amount</label>
          <input type="text"/>
        </div>
        <div class="form-group">
          <label>Choice</label>
          <div class="select-input">
            <select>
              <option>&nbsp;</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label>Division</label>
          <div class="select-input">
            <select>
              <option>&nbsp;</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label>Department</label>
          <div class="select-input">
            <select>
              <option>&nbsp;</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label>Category</label>
          <div class="select-input">
            <select>
              <option>&nbsp;</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary formClose">
            <i class="icon-check"></i>
          </button>
          <a href="#" class="btn btn-primary formClose">
            <i class="icon-x"></i>
          </a>
        </div>
      </form>
    </div> <!-- hidden form -->

    <div class="tableData">
      <table>
        <thead>
          <tr>
            <th class="arrow-space"></th>
            <th>Date</th>
            <th>Project ID</th>
            <th>Expense</th>
            <th>Description</th>
            <th>Units</th>
            <th>Cost</th>
            <th>Amount</th>
            <th>B</th>
            <th>A</th>
            <th>M</th>
            <th>VB</th>
            <th>Created On</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="arrow-space"></td>
            <td>2/15/2012</td>
            <td>10 Municipal Offices</td>
            <td>Photos</td>
            <td>PHOTOGRAPHS</td>
            <td>10.00</td>
            <td>$5.00</td>
            <td>$55.00</td>
            <td>Y</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>2/15/2012</td>
            <td>
              <a href="#" class="btn formToggle" title="Edit Data">
                <i class="icon-pen-note"></i>
              </a>
              <a href="#" class="btn" title="Delete">
                <i class="icon-x"></i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div> <!-- main data -->

    <div class="tableOpt">
      <a href="#" id="chartToggle" class="toggle">show chart</a>

      <ul class="pagination">
        <li class="disabled"><a href="#">Prev</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">Next</a></li>
      </ul> <!-- /pagination -->  
    </div> <!-- extra option -->

    <!-- Sidebar Kanan
    ================================================== -->
    <div id="sidebarRight" class="barHide">
      <span class="elipsis"></span>
    </div>

  </div> <!-- /container -->

  <div id="schemeModal" class="modal hide">
    <h4>Change Color Scheme</h4>
    <div class="color-panel"></div>
  </div> <!-- color panel -->

  <div id="chartModal" class="modal hide">
    <div id="chart1" style="height:270px; width:650px;"></div>
    <a href="#" id="chartClose" class="black-link">hide chart</a>
  </div> <!-- hidden chart -->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
  <script type="text/javascript" src="assets/js/facescroll.js"></script>
  <script type="text/javascript" src="assets/js/jquery.jqplot.min.js"></script>
  <script type="text/javascript" src="assets/js/jqplot.barRenderer.min.js"></script>
  <script type="text/javascript" src="assets/js/jqplot.highlighter.min.js"></script>
  <script type="text/javascript" src="assets/js/jqplot.cursor.min.js"></script>
  <script type="text/javascript" src="assets/js/jqplot.pointLabels.min.js"></script>
  <script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('.tableData, #tableForm, #sidebarMenu').alternateScroll();
    })

    $('#tableFilter').click(function(){
      $(this).removeClass('moreLeft');
      $('#tableForm').removeClass('openForm');
      $('#sidebarRight').addClass('barHide');
      $('.tableData').removeClass('moreLeft');
    });

    $('#colorToggle').click(function(){
      $(this).toggleClass('active');
      $('#schemeModal').toggleClass('hide');
    });

    $('#chartToggle').click(function(){
      $('#chartModal').removeClass('hide');
    });

    $('#chartClose').click(function(){
      $('#chartModal').addClass('hide');
    });

    $('#schemeModal').click(function(){
      $(this).addClass('hide');
      $('#colorToggle').removeClass('active');
    });

    $('.formToggle').click(function(){
      $('#tableForm').addClass('openForm');
      $('.blocker').removeClass('hide');
      $('#tableFilter').removeClass('moreLeft');
      $('#tableFilter').removeClass('filterOpen');
      $('table tbody tr').removeClass('clicked');
    });

    $('.formClose').click(function(){
      $('#tableForm').removeClass('openForm');
      $('.blocker').addClass('hide');
      $('table tbody tr').removeClass('active');
    });

    $('.tableData').click(function(){
      $('#tableFilter').removeClass('moreLeft');
      $(this).removeClass('moreLeft');
      $('#sidebarRight').addClass('barHide');
    });

    $('#sidebarRight').click(function(){
      $(this).toggleClass('barHide');
      $('#tableFilter').removeClass('filterOpen');
      $('#tableFilter, .tableData').toggleClass('moreLeft');
      $('#tableForm').removeClass('openForm');
    });

    $('table tbody tr').click(function(){
      $('table tbody tr').removeClass('active');
      $(this).toggleClass('clicked');
      $(this).addClass('active');
    });

    $('.clicked').click(function(){
      $(this).removeClass('clicked');
      $(this).removeClass('active');
    });

    $('#tableFilter .elipsis').click(function(){
      $('#tableFilter').toggleClass('filterOpen');
    });

    $(document).ready(function () {
      var s1 = [[2002, 112000], [2003, 122000], [2004, 104000], [2005, 99000], [2006, 121000], 
      [2007, 148000], [2008, 114000], [2009, 133000], [2010, 161000], [2011, 173000]];
      var s2 = [[2002, 10200], [2003, 10800], [2004, 11200], [2005, 11800], [2006, 12400], 
      [2007, 12800], [2008, 13200], [2009, 12600], [2010, 13100]];
   
      plot1 = $.jqplot("chart1", [s2, s1], {
          // Turns on animatino for all series in this plot.
          animate: true,
          // Will animate plot on calls to plot1.replot({resetAxes:true})
          animateReplot: true,
          cursor: {
              show: true,
              zoom: true,
              looseZoom: true,
              showTooltip: false
          },
          series:[
              {
                  pointLabels: {
                      show: true
                  },
                  renderer: $.jqplot.BarRenderer,
                  showHighlight: false,
                  yaxis: 'y2axis',
                  rendererOptions: {
                      // Speed up the animation a little bit.
                      // This is a number of milliseconds.  
                      // Default for bar series is 3000.  
                      animation: {
                          speed: 2500
                      },
                      barWidth: 15,
                      barPadding: -15,
                      barMargin: 0,
                      highlightMouseOver: false
                  }
              }, 
              {
                  rendererOptions: {
                      // speed up the animation a little bit.
                      // This is a number of milliseconds.
                      // Default for a line series is 2500.
                      animation: {
                          speed: 2000
                      }
                  }
              }
          ],
          axesDefaults: {
              pad: 0
          },
          axes: {
              // These options will set up the x axis like a category axis.
              xaxis: {
                  tickInterval: 1,
                  drawMajorGridlines: false,
                  drawMinorGridlines: true,
                  drawMajorTickMarks: false,
                  rendererOptions: {
                  tickInset: 0.5,
                  minorTicks: 1
              }
              },
              yaxis: {
                  tickOptions: {
                      formatString: "$%'d"
                  },
                  rendererOptions: {
                      forceTickAt0: true
                  }
              },
              y2axis: {
                  tickOptions: {
                      formatString: "$%'d"
                  },
                  rendererOptions: {
                      // align the ticks on the y2 axis with the y axis.
                      alignTicks: true,
                      forceTickAt0: true
                  }
              }
          },
          highlighter: {
              show: true, 
              showLabel: true, 
              tooltipAxes: 'y',
              sizeAdjust: 7.5 , tooltipLocation : 'ne'
          }
      });
    });
  </script>

  <!--[if lt IE 9]><script>  
  if (/*@cc_on!@*/false) {  
    document.documentElement.className+=' ie10';  
  }  
  </script><![endif]-->

</body>